<!-- 用户主页 -->
<template>
	<view>
		<view class="pageBox">
			<view class="topBox">
				<image :src="pageData.bg_picture" mode="" class="bgimg"></image>
				<view class="contentBox">
					<view class="oneBox">
						<view class="status_bar"></view>
						<zdynav fromval="userinfo"></zdynav>
					</view>
					<view class="twoBox">
						<view class="row1">
							<view class="left1">
								<image :src="pageData.avatar" mode="" class="img"></image>
							</view>
							<view class="left2">
								<view class="txt1">{{pageData.nickname}}</view>
								<view class="txt2">悦知趣号：{{pageData.yzq_code}}</view>
								<view class="txt3">IP属地：{{pageData.ip_place}}</view>
							</view>
						</view>
						<view class="row2" v-if="pageData.introduction">{{pageData.introduction}}</view>
						<view class="row2" v-else>啥也没有...</view>
						<view class="row3">
							<view class="row31">
								<view class="">
									<u-icon name="man" color="#FF409A" size="24" v-if="pageData.sex==1"></u-icon>
									<u-icon name="woman" color="#FF409A" size="24" v-else-if="pageData.sex==2"></u-icon>
								</view>
								<view class="txt">{{pageData.constellation?pageData.constellation:''}}</view>
							</view>
							<view class="row31">
								<view class="txt">{{pageData.ip_place}}</view>
							</view>
						</view>
						<view class="row4">
							<view class="left">
								<view class="left1">
									<view class="left11">{{pageData.follow_num?pageData.follow_num:0}}</view>
									<view class="left12">关注</view>
								</view>
								<view class="left1">
									<view class="left11">{{pageData.fans_num?pageData.fans_num:0}}</view>
									<view class="left12">粉丝</view>
								</view>
								<view class="left1">
									<view class="left11">{{pageData.collect_num?pageData.collect_num:0}}</view>
									<view class="left12">获赞与收藏</view>
								</view>
							</view>
							<view class="right">
								<view class="guanzhu" @click="guanzhuFn">{{pageData.status_name}}</view>
								<navigator :url="`/pagesChat/chat?uid=${pageData.uid}`" class="iconBox">
									<u-icon name="chat" color="#fff" size="28"></u-icon>
								</navigator>
							</view>
						</view>
					</view>
					<view class="threeBox">
						<view class="item" :class="{active:navIndex==0}" @click="navFn(0)">
							<view class="txt">笔记</view>
						</view>
						<view class="item" :class="{active:navIndex==1}" @click="navFn(1)">
							<view style="margin-right:1px;" v-if="navIndex">
								<u-icon name="lock" color="#333" size="24"></u-icon>
							</view>
							<view style="margin-right:1px;" v-else>
								<u-icon name="lock" color="#999" size="24"></u-icon>
							</view>
							<view class="txt">收藏</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottomBox">
				<scroll-view scroll-y="true" class="scrollStyle" @scrolltolower="scrolltolowerFn">
					<view>
						<view class="itemBox">
							<navigator :url="`/pagesChat/detail?id=${item.id}`" class="item" v-for="item in pageDataTwo" :key="item.id">
								<image :src="item.picture[0]" mode="widthFix" class="item1"></image>
								<view class="item2">{{item.title}}</view>
								<view class="item3">
									<view class="left">
										<image :src="item.avatar" mode="" class="img"></image>
										<view class="txt">{{item.u_name}}</view>
									</view>
									<view class="right">
										<view class="">
											<u-icon name="heart" color="#999" size="24"></u-icon>
										</view>
										<view class="txt">赞</view>
									</view>
								</view>
							</navigator>
						</view>
						<view style="padding:20rpx 0;">
							<u-loadmore :status="loadStatus" />
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 弹窗 -->

	</view>
</template>

<script>
	import api from '@/commonJS/api.js';
	import common from '@/commonJS/common.js';
	export default {
		data() {
			return {
				prevPageData: '', //上个页面传的参数
				myInfo: '', //我的信息
				pageData: '', //用户信息
				pageDataTwo: '', //用户笔记 或 用户收藏
				navIndex: 0,
				pageNum: 1, //分页
				loadStatus: 'loadmore', //加载状态
			}
		},
		onLoad(option) {
			console.log('上个页面传的', option);
			this.prevPageData = option;
			if (uni.getStorageSync('userInfo')) {
				this.myInfo = JSON.parse(uni.getStorageSync('userInfo'));
				console.log('我的信息', this.myInfo);
				this.getYourInfo();
				this.getYourBiji();
			} else {
				uni.navigateTo({
					url: '/pagesLogin/login'
				});
			}
		},
		methods: {
			//获取你的信息
			getYourInfo() {
				const obj = {
					uid: this.prevPageData.uid
				}
				const _this = this;
				common.ajaxFn(api.getUserInfoTwo, 'POST', obj).then((res) => {
					console.log('用户信息', res);
					if (res) {
						_this.pageData = res.data.data.list;
					}
				});
			},
			//获取你的笔记
			getYourBiji() {
				this.loadStatus = 'loading';
				const obj = {
					uid: this.prevPageData.uid,
					page: this.pageNum,
					limit: 10
				}
				const _this = this;
				common.ajaxFn(api.user_biji, 'POST', obj).then((res) => {
					console.log('用户笔记', res);
					if (res) {
						if (_this.pageNum == 1) {
							_this.pageDataTwo = res.data.data.list;
						} else {
							_this.pageDataTwo = _this.pageDataTwo.concat(res.data.data.list);
						}
						if (res.data.data.list.length < 10) {
							_this.loadStatus = 'nomore';
						} else {
							_this.loadStatus = 'loadmore';
						}
					}
				});
			},
			//获取你的收藏
			getYourShoucang() {
				const obj = {
					user_id: this.prevPageData.uid,
					is_del: 0
				}
				const _this = this;
				common.ajaxFn(api.user_shoucang, 'POST', obj).then((res) => {
					console.log('用户收藏', res);
					if (res) {
						_this.pageDataTwo = res.data.data.list;
						if (res.data.data.list.length < 10) {
							_this.loadStatus = 'nomore';
						} else {
							_this.loadStatus = 'loadmore';
						}
					}
				});
			},
			// 点关注
			guanzhuFn() {
				const obj = {
					user_id: this.myInfo.uid,
					followed_user: this.pageData.uid
				}
				const _this = this;
				common.ajaxFn(api.im_isguanzhu, 'POST', obj).then((res) => {
					console.log('关注或取消关注', res);
					if (res) {
						_this.getYourInfo();
					}
				});
			},
			// 点击菜单
			navFn(index) {
				if (this.navIndex != index) {
					this.navIndex = index;
					if (this.navIndex) {
						this.getYourShoucang();
					} else {
						this.pageNum = 1;
						this.getYourBiji();
					}
				}
			},
			// 到底了
			scrolltolowerFn() {
				console.log('到底了');
				if (this.navIndex == 0) {
					this.pageNum++
					this.getYourBiji();
				}
			},



		}
	}
</script>

<style lang="scss" scoped>
	.pageBox {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: grid;
		grid-template-rows: 802rpx 1fr;

		.topBox {
			position: relative;

			.bgimg {
				display: block;
				width: 100%;
				height: 100%;
			}

			.contentBox {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				display: grid;
				grid-template-rows: auto 1fr auto;

				.oneBox {
					.status_bar {
						height: var(--status-bar-height);
						width: 100%;
					}
				}

				.twoBox {
					padding: 40rpx 30rpx 0 30rpx;

					.row1 {
						display: flex;
						align-items: center;

						.left1 {
							.img {
								display: block;
								width: 154rpx;
								height: 154rpx;
								border-radius: 50%;
							}
						}

						.left2 {
							margin-left: 30rpx;

							.txt1 {
								color: #fff;
								font-size: 40rpx;
							}

							.txt2 {
								margin: 8rpx 0 4rpx 0;
								color: #ccc;
								font-size: $font-ershi;
							}

							.txt3 {
								color: #ccc;
								font-size: $font-ershi;
							}
						}
					}

					.row2 {
						margin: 30rpx 0;
						color: #fff;
						font-size: $font-ersi;
					}

					.row3 {
						display: flex;

						.row31 {
							margin-right: 14rpx;
							padding: 0 14rpx;
							height: 38rpx;
							background: rgba(0, 0, 0, 0.15);
							border-radius: 19rpx;
							display: flex;
							align-items: center;

							.txt {
								margin-left: 4rpx;
								color: #fff;
								font-size: $font-ershi;
							}
						}
					}

					.row4 {
						margin-top: 50rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left {
							display: flex;

							.left1 {
								margin-right: 36rpx;
								display: flex;
								flex-direction: column;
								align-items: center;
								color: #fff;

								.left11 {
									font-size: $font-erba;
									font-weight: bold;
								}

								.left12 {
									font-size: $font-ersi;
								}
							}
						}

						.right {
							display: flex;

							.guanzhu {
								margin-right: 28rpx;
								width: 176rpx;
								height: 54rpx;
								background-color: $pink;
								border-radius: 27rpx;
								color: #fff;
								font-size: $font-erliu;
								font-weight: bold;
								text-align: center;
								line-height: 54rpx;
							}

							.iconBox {
								width: 78rpx;
								height: 54rpx;
								background: rgba(255, 255, 255, 0.2);
								border: 1px solid #fff;
								border-radius: 27rpx;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}
					}
				}

				.threeBox {
					height: 88rpx;
					background-color: #fff;
					border-radius: 30rpx 30rpx 0 0;
					display: flex;
					justify-content: center;
					align-items: center;

					.item {
						margin: 0 48rpx;
						padding: 4rpx 0;
						border-bottom: 4rpx solid #fff;
						display: flex;
						align-items: center;

						.txt {
							color: $gray-nine;
							font-size: $font-saner;
						}
					}

					.active {
						border-bottom: 4rpx solid $pink;

						.txt {
							color: $gray-three;
							font-weight: bold;
						}
					}
				}








			}
		}

		.bottomBox {
			background-color: #F4F4F4;
			position: relative;

			.scrollStyle {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;

				.itemBox {
					overflow: hidden;

					.item {
						width: 345rpx;
						background-color: #fff;

						.item1 {
							display: block;
							width: 100%;
						}

						.item2 {
							padding: 20rpx;
							color: $gray-three;
							font-size: $font-erliu;
							font-weight: bold;
						}

						.item3 {
							padding: 0 20rpx 20rpx 20rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.left {
								display: flex;
								align-items: center;

								.img {
									margin-right: 12rpx;
									display: block;
									width: 36rpx;
									height: 36rpx;
									border-radius: 50%;
								}

								.txt {
									color: $gray-six;
									font-size: $font-ershi;
								}
							}

							.right {
								display: flex;
								align-items: center;

								.txt {
									margin-left: 10rpx;
									color: $gray-six;
									font-size: $font-ersi;
								}
							}
						}
					}

					.item:nth-child(odd) {
						float: left;
						margin: 20rpx 0 0 20rpx;
					}

					.item:nth-child(even) {
						float: right;
						margin: 20rpx 20rpx 0 0;
					}
				}
			}
		}
	}
</style>